<template>
  <div class="aside">
    <div class="air-info">
      <el-row type="flex" justify="space-between" class="info-top">
        <div>{{ ticketChooseList.dep_date }}</div>
        <div>{{ ticketChooseList.org_city_name }} - {{ ticketChooseList.dst_city_name }}</div>
      </el-row>

      <el-row type="flex" justify="space-between" align="middle" class="info-step">
        <el-col :span="5" class="flight-airport">
          <strong>{{ ticketChooseList.dep_time }}</strong>
          <span>{{ ticketChooseList.org_airport_name }}{{ ticketChooseList.org_airport_quay }}</span>
        </el-col>
        <el-col :span="14" class="flight-time">
          <span>--- {{rankTime}} ---</span>
          <span>{{ ticketChooseList.airline_name }}{{ ticketChooseList.flight_no }}</span>
        </el-col>
        <el-col :span="5" class="flight-airport">
          <strong>{{ ticketChooseList.arr_time }}</strong>
          <span>{{ ticketChooseList.dst_airport_name }}{{ ticketChooseList.dst_airport_quay }}</span>
        </el-col>
      </el-row>
    </div>

    <el-row type="flex" justify="space-between" class="info-bar">
      <span>订单总价</span>
      <span>总金额</span>
      <span>数量</span>
    </el-row>
    <el-row type="flex" justify="space-between" class="info-bar">
      <span>成人机票</span>
      <span>￥{{ ticketChooseList.seat_infos.org_settle_price * UsersLength }}</span>
      <span>{{UsersLength}}</span>
    </el-row>
    <el-row type="flex" justify="space-between" class="info-bar" v-if="insurancesPrice">
      <span>保险</span>
      <span style="margin-left: 14px;">￥{{ insurancesPrice }}</span>
      <span>{{UsersLength}}</span>
    </el-row>
    <el-row type="flex" justify="space-between" class="info-bar">
      <span>机建＋燃油</span>
      <span>￥{{ ticketChooseList.airport_tax_audlet }}/人/单程</span>
      <span>x {{UsersLength}}</span>
    </el-row>

    <el-row type="flex" justify="space-between" align="middle" class="info-bar">
      <span style="font-size: 18px;">应付总额：</span>
      <span class="price">￥{{ totalPrice }}</span>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    ticketChooseList: {
      type: Object,
      default: {}
    },
    // 父组件传过来的总价
    totalPrice: Number,
    // 父组件传过来的乘机人的数组长度
    UsersLength: Number,
    // 父组件传过来的乘机人的保险总价
    insurancesPrice: Number
  },

  computed: {
    rankTime() {
      // 数据还未请求回来
      if (!this.ticketChooseList.dep_time) {
        return;
      }

      // 到达时间
      let arrTime =
        Number(this.ticketChooseList.arr_time.split(":")[0]) * 60 +
        Number(this.ticketChooseList.arr_time.split(":")[1]);
      // 出发时间
      let depTime =
        Number(this.ticketChooseList.dep_time.split(":")[0]) * 60 +
        Number(this.ticketChooseList.dep_time.split(":")[1]);
      // 如果时差小于0，使到达时间+24h
      if (arrTime - depTime < 0) {
        arrTime += 24 * 60;
      }

      return `${Math.floor((arrTime - depTime) / 60)}小时${(arrTime - depTime) %
        60}分`;
    }
  }
};
</script>

<style scoped lang="less">
.aside {
  width: 350px;
  height: fit-content;
  border: 1px #ddd solid;
  background: #fff;
  border-radius: 16px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.air-info {
  padding: 26px;

  .info-top {
    margin-bottom: 10px;
    > div:last-child {
      font-size: 14px;
    }
  }

  .info-step {
    .flight-airport {
      strong {
        display: block;
        font-size: 26px;
        font-weight: normal;
      }

      span {
        font-size: 12px;
        color: #999;
      }
    }

    .flight-time {
      text-align: center;
      font-size: 12px;
      color: #999;
      span {
        display: block;
      }
    }
  }
}

.info-bar {
  border-top: 1px #ddd dashed;
  padding: 10px 26px;
  font-size: 14px;
  color: #666;

  &:last-child {
    padding: 20px 26px;
  }

  .price {
    font-size: 28px;
    color: orange;
  }
}
</style>